<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<view class="form">
			<u-form labelPosition="left" :model="leasingManager" :rules="rules" labelWidth="auto" ref="uForm">
				<u-form-item prop="name" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">姓名:</span>
					</template>
					<u-input v-model="leasingManager.name" border="none" placeholder="请输入姓名"></u-input>
				</u-form-item>

				<u-form-item prop="phone" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">电话:</span>
					</template>
					<u-input v-model="leasingManager.phone" border="none" placeholder="请输入电话"></u-input>
				</u-form-item>


				<u-form-item prop="phone" borderBottom v-if="leasingManager.reject_msg">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">驳回原因:</span>
					</template>
					<text>{{leasingManager.reject_msg}}</text>
				</u-form-item>

				<!-- <u-form-item prop="code" borderBottom
					style="display: flex; align-items: center; justify-content: space-between;">
					<template #label class="title" style="display: flex; align-items: center;">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx; font-weight: bold;">验证码:</span>
					</template>
					<u-input v-model="leasingManager.code" border="none" placeholder="请输入验证码"
						style="flex: 1; margin-right: 10px;"></u-input>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"
						style="margin-right: 10px;"></u-code>
					<u-button @tap="getCode" size="mine">{{tips}}</u-button>
					<u-toast ref="uToast"></u-toast>
				</u-form-item> -->

				<u-form-item borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">签名:</span>
					</template>
				</u-form-item>
				<u-form-item borderBottom>
					<image :src="leasingManager.card_top" @click="show2=true" mode="widthFix"
						style="width: 250px;height: 150px;"></image>
				</u-form-item>
			</u-form>

		</view>

		<!-- 协议弹框 -->
		<u-popup :show="show" round="10" mode="center" @close="close" @open="open">
			<view style="margin: 20rpx;">
				<view class="title1" style="text-align: center;">
					招商经理入驻协议
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-html="textConten"> </view>
				</scroll-view>
			</view>
		</u-popup>

		<u-popup :show="show2" round="10" mode="center" @close="close2">
			<view style="margin: 20rpx;">
				<SignaturePad @getImg="getImgFn" />
			</view>
		</u-popup>


		<view class="container">

			<view class="item">
				<u-checkbox-group @change="changeFn">
					<u-checkbox></u-checkbox>
				</u-checkbox-group>

				<view>
					我已阅读
					<text class="text1" @click="show=true">《招商经理入驻协议》</text>，
					并已签署
					<text class="text1" @click="hetong">《招商经理入驻合同》</text>
				</view>
			</view>
			<view class="custom-button" @tap="submit">提交</view>


		</view>
		<!-- 协议弹框 -->

	</view>
</template>

<script>
	import {
		getAgreementData,
		addAttract,
		getAttract,
		uploadImg,
	} from '@/config/api.js';

	import SignaturePad from './../canvas.vue';
	export default {
		components: {
			SignaturePad,
		},
		data() {
			return {
				show2: false,
				isAgreed: false, // 用于存储协议是否已阅读
				leasingManager: {
					name: '',
					phone: '',
					code: '',
					reject_msg: null,
					card_top: null,
				},
				rules: {
					'name': [{
						required: true,
						message: '姓名是必填项',
						trigger: 'blur'
					}],
					'phone': [{
							required: true,
							message: '电话是必填项',
							trigger: 'blur',

						},

					]



					// code: {
					// 	required: true,
					// 	message: '验证码是必填项'
					// },
				},
				seconds: 60, // 用于验证码倒计时
				tips: '获取验证码',
				isSelfImg: '',
				show: false, // 控制弹框的显示
				textConten: '',
				id: null,
			};
		},

		onLoad(options) {
			// 获取传递过来的标题
			// console.log('jsjsj', options)
			getAgreementData({
				id: 10
			}).then(res => {
				this.textConten = res;
			})

			getAttract().then(res => {
				this.id = res.id;
				this.leasingManager.name = res.attract_name;
				this.leasingManager.phone = res.attract_phone;
				this.leasingManager.reject_msg = res.reject_msg;
				this.leasingManager.card_top = res.card_top;
			})
		},
		methods: {
			getImgFn(url) {

				this.close2();
				url && this.uploadFilePromise(url)
			},

			uploadFilePromise(url) {
				uploadImg({
					url: url,
					fileName: 'contract'
				}).then(res => {
					this.isSelfImg = res;
				})
			},
			changeFn(e) {
				this.isAgreed = !!e.length;
			},
			//协议和合同
			open() {
				// console.log('open');
			},
			close2() {
				this.show2 = false
			},
			close() {
				this.show = false
				// console.log('close');
			},
			hetong() {
				uni.navigateTo({
					url: '/moduleA/MerchantIn/contract?id=3',
				});
			},

			getCode() {
				// 获取验证码的逻辑
				console.log('获取验证码');
			},
			end() {
				// 结束倒计时的逻辑
				console.log('倒计时结束');
			},
			start() {
				// 开始倒计时的逻辑
				console.log('倒计时开始');
			},
			codeChange() {
				// 处理验证码变化的逻辑
				console.log('验证码变化');
			},
			submit() {
				// 首先进行表单验证
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
					console.log('222')
					if (this.isAgreed) {
						// 提交逻辑
						// console.log('协议已阅读，提交成功');
						if (!this.isSelfImg) {
							this.show2 = true;
							return;
						}
						const sendata = {
							attract_name: this.leasingManager.name,
							attract_phone: this.leasingManager.phone,
							card_top: this.isSelfImg
						}
						if (this.id) {
							sendata['status'] = 2;
							sendata['id'] = this.id;
						}
						addAttract(sendata).then(res => {
							uni.$u.toast('审核中..')
						});
						console.log(sendata, '--------')

					} else {
						// 提示用户需阅读协议
						// this.$refs.uToast.show();
						uni.$u.toast('请先阅读统一招商协议')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style scoped>
	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}


	.container {
		position: fixed;
		bottom: 0rpx;
		margin-top: auto;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.text1 {
		color: #d1a969;
	}


	.container .custom-button {
		width: 96%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #d1a969;
		/* 设置按钮的背景颜色 */
		color: #fff;
		border-radius: 50rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}
</style>